<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./five_zzy.css" type="text/css">
    <title>购物商城demo</title>
    <link rel="stylesheet" href="../all-work/CSS/mian/goto.css">
    <link rel="stylesheet" href="three.css">
    <link rel="stylesheet" href="../all-work/CSS/mian/mian_banner.css">
    
    <link rel="stylesheet" href="../all-work/CSS/mian/mian_yuobian.css">
</head>
<<<<<<< HEAD
<style>
    *{
            margin: 0;
            padding: 0;
        }
=======
<style>/*宋厚峰*/
>>>>>>> 3c4c17d9efc8edff7b259bc1a8ed22798b7bc09a
     .A{
  width: 1190px;
  height: 80px;
  background-color: blue;
  color: aliceblue;
  font-size: 60px;/*控制 字符框 的高度*/
  text-align: center;/*设置元素中的文本对齐方式*/
  line-height: 300px;/*网页中每行文字之间的距离*/
  margin: 0 auto;/*设置元素的外边距*/
  position: relative;/*定位方式*/
  }
  .A1{
    width: 20px;
      height: 20px;
      color: yellow;
      border: 1px solid black;
      background-color: red;
      position: absolute;
      top: 0;
      right: 0;
      row-gap: 20px;
      cursor: pointer;
  }
  /* 杨正印 */
  body{
				background-color: #f0f0f0;
			}
			.sm{
				width: 1200px;
				height: 130px;
				position: relative;
				left: 50px;
				display: flex; /*向右边排列*/
                font-size: 23px;
                font-weight: 800px;
			}
			.d{
				width: 300px;
				height: 130px;
			}
			.k{
				width: 300px;
				height: 130px;
			}
			.h{
				width: 300px;
				height: 130px;
			}
			.s{
				width: 300px;
				height: 130px;
			}
			img{
				margin-top: -50px;
			}
			.wz{
			display: inline-block;
			vertical-align: middle;
			margin-top: -45px;
			}
			.xiang{
			border: none;
			height: 1px;
			background-color: #999;
			position: relative;
			top: -20px;
            right: 0px;
            width: 1300px;
			}
			.xm{
				width: 1300px;
				height: 200px;
				background-color:#f0f0f0;
				position: relative;
				left: 0px;
				color: #586070;
				display: flex;
			}
			.gw{
				width: 300px;
				height: 300px;
			}
			.ps{
				width: 300px;
				height: 300px;
			}
			.zf{
			width: 300px;
			height: 300px;
			}
			.sh{
			width: 300px;
			height: 300px;
			}
			.ts{
			width: 300px;
			height: 300px;
			}
			 a{
			color: #98A0A8;
			text-decoration: none;
			font-size: 13px;
			}
			 a:hover{
			color: red;
			}
			  p{
			line-height: 0.5;
			}
			 .jd{
			width: 300px;
			height: 300px;
			}
			.pjd{
			display: inline-block;
			vertical-align: middle;
			margin-left: -20px;
			font-size: 13px;
			line-height: 1.5;
			color: #98A0A8;
			}
			hr{
            border: none;
			height: 1px;
			background-color: #999;
			
            width: 1260px;
			}
<<<<<<< HEAD
 
=======
            .smSon{
             flex: 1;
             height: 130px;
            display: flex;
            /* justify-content: space-between; */
            align-items: center;
}
            .A {
>>>>>>> 62c94780ff654f5a1493dee0243030fd40b07b56
        width: 1190px;
        height: 80px;
        background-color: blue;
        color: aliceblue;
        font-size: 60px;
        /*控制 字符框 的高度*/
        text-align: center;
        /*设置元素中的文本对齐方式*/
        line-height: 300px;
        /*网页中每行文字之间的距离*/
        margin: 0 auto;
        /*设置元素的外边距*/
        position: relative;
        /*定位方式*/
    }

    .A1 {
        width: 20px;
        height: 20px;
        color: yellow;
        border: 1px solid black;
        background-color: red;
        position: absolute;
        top: 0;
        right: 0;
        row-gap: 20px;
        cursor: pointer;
    }
<<<<<<< HEAD

=======
<<<<<<< HEAD
>>>>>>> 15bad16e6cbea15763b303a3e6cb6354b2695482
    a,li,span{color:#999;
            text-decoration: none;}
       
        .clearfix::before,
        .clearfix::after{
            content:'';
            display:table;
            clear:both;
        }
       
        .top-bar a:hover,
        .top-bar a.highlight{
             color:#f10215;
        }
       
        .shortcut .line{
            width:1px;
            height: 10px;
            
            background-color: rgb(179,179,179);
            margin: 10px 12px;
        }
        body{
    
    font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
    
    color: #999;
        }
      
        .top-bar-wrapper{
          
            width: 100%;
           
            background-color:#E3E4E5 ;
            height: 35px;
           
            line-height:30px;
            border-bottom:1px solid  #ddd;
            position: relative;
          right: 7px;
        }
        
        .top-bar{
            width:1190px;
        
            margin:0 auto;
        }
       
        .location{
            float:left;
        }
      
        .shortcut{
            float:right;
        }
       
        .shortcut li{
        
            float:left;
        }
        
       
       .location .fas{
        
        color:#f10215
       }
     
       .city-list{
             display:none;
             width: 320px;
             height: 436px;
             background-color:white;
             border:1px solid rgb(204,204,204);
             
             position: absolute;
             top:31px;
             z-index:999;
            
             box-shadow: 0 2px 2px rgba(0,0,0,.2);
       }
      
       .current-city:hover{
            background-color: white;
            border:1px solid rgb(204,204,204);
            border-bottom:none;
            padding-bottom: 1px;
       }
       .current-city{
        padding: 0 10px;
        position:relative;
        z-index: 1;
       }
      
      .location:hover .city-list{
        display: block;
      }
/*宋厚峰end*/
    /* 杨正印 */
    body {
        background-color: #f0f0f0;
    }

    .sm {
        width: 1200px;
        height: 130px;
        position: relative;
        left: 200px;
        display: flex;
        /* 向右边排列 */
    }

    .d {
        width: 300px;
        height: 130px;
    }

    .k {
        width: 300px;
        height: 130px;
    }

    .h {
        width: 300px;
        height: 130px;
    }

    .s {
        width: 300px;
        height: 130px;
    }

    img {
        margin-top: 35px;
    }

    .wz {
        display: inline-block;
        vertical-align: middle;
        margin-top: -45px;
    }

    .xiang {
        border: none;
        height: 1px;
        background-color: #999;
        margin: 0px 0;
        position: relative;
        top: -20px;
    }

    .xm {
        width: 1300px;
        height: 200px;
        background-color: #f0f0f0;
        position: relative;
        left: 150px;
        color: #586070;
        display: flex;
        /* 向右边排列 */
    }

    .gw {
        width:300px;
        height:300px;
    }

    .ps {
        width: 300px;
        height: 300px;
    }

    .zf {
        width: 300px;
        height: 300px;
    }

    .sh {
        width: 300px;
        height: 300px;
    }

    .ts {
        width: 300px;
        height: 300px;
    }

    a {
        color: #98A0A8;
        text-decoration: none;
        font-size: 13px;
    }

    a:hover {
        color: red;
    }

    p {
        line-height: 0.5;
    }

    .jd {
        width: 300px;
        height: 300px;
    }

    .pjd {
        display: inline-block;
        vertical-align: middle;
        margin-left: -20px;
        font-size: 13px;
        line-height: 1.5;
        color: #98A0A8;
    }

    hr {
        width: 1300px;
        position: relative;
        right: -40px;
    }
<<<<<<< HEAD
    
        .box1{
            height:60px;
            width:100vw;
            background-color:wheat;
        }
        /* .box1:hover{
            border-bottom:2px solid red;
        } */
        .img1{
            width:120px;
            height:30px;
            position:fixed;left:240px;top:15px;
        }
        .img1:hover{
            cursor: pointer;
        }
        .box2{
            height:35px;
            width:540px;
            position:fixed;top:10px;left:490px;
            border:2px solid red;
        }
        .box3{
            width:70px;
            height:36px;
            position: relative;left:470px;
            background-color:rgb(225, 37, 27);
        }
        .box3:hover{
            cursor: pointer;
            background-color:rgb(200, 22, 35);
        }
        .img2{
            position:relative;left:25px;bottom:30px;
	        width:22px;
	        height:22px;
        }
        .input{
		float:left;
        position: relative;left:15px;
		width:470px;
		height:35px;
		outline:none;
		border:none;
	    }
        .img3{
            position:relative;left:430px;bottom:30px;
	        width:22px;
	        height:22px;
            overflow:hidden;
        }
        .img3:hover{
            cursor: pointer;
            transform: translate(0px);
            filter: drop-shadow(rgb(135, 4, 4) 0 0px);
        }
        .box4{
            width:130px;
            height:40px;
            position:fixed;right:470px;top:10px;
            background-color:rgb(244, 244, 244);
            text-align:center;
            line-height:38px;
        }
        .box4:hover{
            cursor: pointer;
            border:1px solid red;
        }
        .box4:hover .box5{display:block;}
        .img4{
            width:16px;
	        height:16px;
        }
        .box5{
            width:300px;
            height:60px;
            font-size:12px;
            text-align: center;
            line-height:55px;
            background-color:rgb(244, 244, 244);
            position:fixed;right:470px;
            border-right:1px solid red;
            border-bottom:1px solid red;
            border-left:1px solid red;;
            display:none;
        }
=======
</style>

<body>
    <div class="container">
        <!-- 头部区域 -->
      /*宋厚峰*/  <div class="A">
<<<<<<< HEAD
=======
=======
.smSon{
    flex: 1;
    height: 130px;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}
>>>>>>> d02c6711fb8028d18a757c6f7d72a43361c436af
>>>>>>> 3c4c17d9efc8edff7b259bc1a8ed22798b7bc09a
    </style>
</head>

<body>
    <div class="container">
        头部区域 -->宋厚峰
        <div class="A">
>>>>>>> 62c94780ff654f5a1493dee0243030fd40b07b56
>>>>>>> 15bad16e6cbea15763b303a3e6cb6354b2695482
            <div class="A1" style="font-size: 16px; line-height: 20px"><strong>✕</strong></div>
        </div>
        <div class="B"></div>
        <!--引入外围的容器-->
        <div class="top-bar-wrapper">
          <!--创建内部容器,整个中间的有字的部分-->
          <!--谁塌陷了就给谁加上clearfix-->
          <div class="top-bar clearfix">
              <!--左侧的菜单-->
              <div class="location">
                  <div class="current-city">
                      <i class="fas fa-map-marker-alt"></i>
                      <a href="javascript:;">北京</a>
                  </div>
                  <!--设置城市列表-->
                  <div class="city-list"></div>
              </div>
              <!--右侧的菜单-->
              <ul class="shortcut">
                  <li>
                      <a href="javascript"> <a href="https://passport.jd.com/new/login.aspx?ReturnUrl=https%3A%2F%2Fwww.jd.com%2F%3Fcu%3Dtrue%26utm_source%3Dhaosou-search%26utm_medium%3Dcpc%26utm_campaign%3Dt_262767352_haosousearch%26utm_term%3D5512151796_0_f5dfc3d7ea9e4b05920ca35c592deff8">你好，请登录</a>
                      <a href="javascript:;" class="highlight" ><a href="https://reg.jd.com/reg/person?ReturnUrl=https%3A//www.jd.com/%3Fcu%3Dtrue%26utm_source%3Dhaosou-search%26utm_medium%3Dcpc%26utm_campaign%3Dt_262767352_haosousearch%26utm_term%3D5512151796_0_f5dfc3d7ea9e4b05920ca35c592deff8">免费注册</a>
                      </li>
                  <!--分隔线-->
                  <li class="line"></li>
                  <li><a href="javascript:;"><a href="https://passport.jd.com/uc/login?ReturnUrl=https%3A%2F%2Forder.jd.com%2Fcenter%2Flist.action">我的订单</a></li>
                  <li class="line"></li>
                  <li><a href="javascript:;"><a href="https://passport.jd.com/uc/login?ReturnUrl=https%3A%2F%2Forder.jd.com%2Fcenter%2Flist.action">我的京东</a>
                      <!--一个向下的箭头-->
                       <i class="fas fa-angle-down"></i>
                  </li>
                  <li class="line"></li>
                  <li><a href="javascript:;"><a href="https://passport.jd.com/uc/login?ReturnUrl=https%3A%2F%2Forder.jd.com%2Fcenter%2Flist.action">京东会员</a>
                      <!--表示一个向下的箭头-->
                      <i class="fas fa-angle-down"></i></li>
                  <li class="line"></li>
                  <li><a href="javascript:;"class="highlight"><a href="https://b.jd.com/">企业采购</a>
                      <i class="fas fa-angle-down"></i></li>
                  
                  <li  class="line"></li>
                  <li>
                      <span>客户服务</span>
                      <i class="fas fa-angle-down"></i>
                  </li>
                  <li  class="line"></li>
                  <li>
                      <span>网站导航</span>
                      <i class="fas fa-angle-down"></i>
                  </li>
                  <li  class="line"></li>
                  <li>
                      <span>手机京东</span>
                      <i class="fas fa-angle-down"></i>
                  </li>
     
              </ul>
          </div>
      </div>
        <script>
            const box1 = document.querySelector('.box1')
            box1.addEventListener('click', function () {
              this.parentNode.style.display = 'none'
            })
          </script> 宋厚峰
        <div class="nav">
            <!-- 头部区域 one -->
            <div>
                <!-- 这是头部区域 -->
            </div>
            <!-- 头部区域 two -->
            <div></div>
        </div>
        <!-- 内容区 -->
        <div class="main">
            <!-- 第一部分 -->
            <div class="main_one">
                <!-- 左边商品列表区域  three  -->
                <div class="commodity">
                    <ul>
                        <li><a href="#">家用电器</a></li>
                        <li><a href="#">手机</a>／<a href="#">运营商</a>／<a href="#">数码</a></li>
                        <li><a href="#">电脑</a>／<a href="#">办公</a>／<a href="#">文具用品</a></li>
                        <li><a href="#">家具</a>／<a href="#">家居</a>／<a href="#">家装</a>／<a href="#">厨具</a></li>
                        <li><a href="#">男装</a>／<a href="#">女装</a>／<a href="#">童装</a>／<a href="#">内衣</a></li>
                        <li><a href="#">美妆</a>／<a href="#">个护清洁</a>／<a href="#">宠物</a></li>
                        <li><a href="#">女鞋</a>／<a href="#">箱包</a>／<a href="#">钟表</a>／<a href="#">珠宝</a></li>
                        <li><a href="#">男鞋</a>／<a href="#">运动</a>／<a href="#">户外</a></li>
                        <li><a href="#">房产</a>／<a href="#">汽车</a>／<a href="#">汽车用品</a></li>
                        <li><a href="#">母婴</a>／<a href="#">玩具乐器</a></li>
                        <li><a href="#">食品</a>／<a href="#">酒类</a>／<a href="#">生鲜</a>／<a href="#">特产</a></li>
                        <li><a href="#">艺术</a>／<a href="#">礼品鲜花</a>／<a href="#">农牧园艺</a></li>
                        <li><a href="#">京东买药</a>／<a href="#">健身</a></li>
                        <li><a href="#">图书</a>／<a href="#">文娱</a>／<a href="#">教育</a>／<a href="#">电子书</a></li>
                        <li><a href="#">机票</a>／<a href="#">酒店</a><a href="#">旅游</a>／<a href="#">生活</a></li>
                        <li><a href="#">支付</a>／<a href="#">白条</a>／<a href="#">保险</a>／<a href="#">企业金融</a></li>
                        <li><a href="#">安装</a>／<a href="#">维修</a>／<a href="#">清洗</a>／<a href="#">二手</a></li>
                        <li><a href="#">五金机电</a>／<a href="#">元器件</a></li>
                       </ul>
                </div>

                <!-- 轮播图区域 four 李霜 -->
                <div id="banner">
                    <!-- 主体图片 -->
                    <ul id="imglist">
                        <li><img src="../all-work/pic/轮播图/1.png.avif"></li>
                        <li><img src="../all-work/pic/轮播图/2.jpg"></li>
                        <li><img src="../all-work/pic/轮播图/3.jpg"></li>
                        <li><img src="../all-work/pic/轮播图/4.jpg"></li>
                        <li><img src="../all-work/pic/轮播图/5.jpg"></li>
                        <li><img src="../all-work/pic/轮播图/6.jpg"></li>
                        <li><img src="../all-work/pic/轮播图/1.png.avif"></li>
                    </ul>
                    <div id="an">
                        <!-- 向左按钮 -->
                        <div id="left"> < </div>
                        <!-- 向右按钮 -->
                        <div id="right"> > </div>
                    </div>
                    <!-- 圆点 -->
                    <ul id="icolist">
                        <li value="1"></li>
                        <li value="2"></li>
                        <li value="3"></li>
                        <li value="4"></li>
                        <li value="5"></li>
                        <li value="6"></li>
                    </ul>
                </div>

                <!-- 右边商品区域  周治羽-->
                <div class="fivx">
                   
                  
                </div>
            </div>
            <!-- 第二部分  six -->
            <div>

            </div>
        </div>
        <!-- 页脚区域 -->
        <div class="footer">
            <!-- 页脚区域seven -->
            <!-- <div>陈玉鑫</div> -->
            <!-- 页脚区域eight -->
            <div class="sm" style="align-items: center;">
                <div class="smSon"><img src="img/img多.png" style="width: 80px; height: 70px;"><div class="wz"><b>品类齐全，轻松购物</b></div></div>
                <div class="smSon"><img src="img/img快.png" style="width: 65px; height: 77px;"><div class="wz"><b>多仓直发，极速配送</b></div></div>
                <div class="smSon"><img src="img/img好.png" style="width: 75px; height: 70px;"><div class="wz"><b>正品行货，精致服务</b></div></div>
                <div class="smSon"><img src="img/img省.png" style="width: 75px; height: 70px;"><div class="wz"><b>天天低价，畅选无忧</b></div></div>
            </div>
                <hr class="xiang">
            <div class="xm">
                <div class="gw"><b>购物指南</b>
                    <p><a href="https://help.jd.com/user/issue/list-29.html">购物流程</a></p>
                    <p><a href="https://help.jd.com/user/issue/list-151.html">会员介绍</a></p>
                    <p><a href="https://help.jd.com/user/issue/list-297.html">生活旅行</a></p>
                    <p><a href="https://help.jd.com/user/issue.html">常见问题</a></p>
                    <p><a href="https://help.jd.com/user/issue/list-136.html">大家电</a></p>
                    <p><a href="https://help.jd.com/user/custom.html">联系客服</a></p>
                </div>
                <div class="ps"><b>配送方式</b>
                    <p><a href="https://help.jd.com/user/issue/list-81-100.html">上门自提</a></p>
                    <p><a href="https://help.jd.com/user/issue/list-81.html">211限时达</a></p>
                    <p><a href="https://help.jd.com/user/issue/list-82.html">配送服务查询</a></p>
                    <p><a href="https://help.jd.com/user/issue/109-188.html">配送费收取标准</a></p>
                </div>
                <div class="zf"><b>支付方式</b>
                    <p><a href="https://help.jd.com/user/issue/list-172.html">货到付款</a></p>
                    <p><a href="https://help.jd.com/user/issue/list-173.html">在线支付</a></p>
                    <p><a href="https://help.jd.com/user/issue/list-176.html">分期付款</a></p>
                    <p><a href="https://help.jd.com/user/issue/list-175.html">公司转账</a></p>
                </div>
                <div class="sh"><b>售后服务</b>
                    <p><a href="https://help.jd.com/user/issue/list-112.html">售后政策</a></p>
                    <p><a href="https://help.jd.com/user/issue/list-132.html">价格保护</a></p>
                    <p><a href="https://help.jd.com/user/issue/130-978.html">退款说明</a></p>
                    <p><a
                            href="https://passport.jd.com/new/login.aspx?ReturnUrl=http%3A%2F%2Fmyjd.jd.com%2Frepair%2Frepairs.action">返修/退换货</a>
                    </p>
                    <p><a href="https://help.jd.com/user/issue/list-50.html">取消订单</a></p>
                </div>
                <div class="ts"><b>特色服务</b>
                    <p><a href="https://1paipai.jd.com/">夺宝岛</a></p>
                    <p><a href="https://help.jd.com/user/issue/list-134.html">DIY装机</a></p>
                    <p><a href="https://fuwu.jd.com/">延保服务</a></p>
                    <p><a href="https://o.jd.com/market/index.action">京东E卡</a></p>
                    <p><a href="https://mobile.jd.com/">京东通信</a></p>
                    <p><a href="https://smart.jd.com/pc">京鱼座智能</a></p>
                </div>
                <div class="jd"><b class="jz">京东自营覆盖区县</b><br>
                    <p class="pjd">京东已向全国2661个区县提供自<br>营配送服务，支持货到付款、<br>POS机刷卡和售后上门服务。<br>
                        &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;<a
                            href="https://help.jd.com/user/issue/103-983.html">查看详情 ></a></p>
                </div>
            </div>
            <div class="xmdx"><hr>
            </div>
        </div>
        <!-- 顶部滚轮触发区域 nine 杨宇航-->
        <div class="topScoll">
            <div class="box1">
                <img src="../杨宇航/京东 .png" class="img1">
                <div class="box2">
                    <input type="text" class="input" placeholder="请输入商品">
                    <div class="box3">
                        <img src="../杨宇航/放大镜.png" class="img2">
                    </div>
                    <img src="../杨宇航/相机.png" class="img3">
                </div>
                <div class="box4">
                    <img src="../杨宇航/购物车.png" class="img4">
                    <a style="color:red; font-size:14px;">我的购物车</a>
                    <div class="box5">购物车中还没有商品，快选购吧！</div>
                </div>
            </div>
        </div>
        <!-- 侧边栏区域 ten -->
        <div class="aside">

        </div>
    </div>
    <div class="A">
        <div class="A1" style="font-size: 16px; line-height: 20px"><strong>✕</strong></div>
    </div>
</body>
<<<<<<< HEAD
<script src="../杨宇航/test.js">
=======

<script type="text/javascript" src="test.js">
>>>>>>> 3c4c17d9efc8edff7b259bc1a8ed22798b7bc09a
    // 杨宇航
</script>
<!-- 轮播图 -->
<script type="text/javascript" src="../all-work/JS/mian_banner.js"></script>
<<<<<<< HEAD


=======
>>>>>>> 62c94780ff654f5a1493dee0243030fd40b07b56
</html>